<template>
	<view style="height:100vh">
		<layout>
			<view class="page-container">
				<!-- 顶部搜索栏 -->
				<view class="search-bar">
					<input class="search-input" placeholder="请输入生产线名称" v-model="searchKeyword"
						@confirm="handleSearch" />
					<view class="button-group">
						<button class="reset-btn" @click="handleReset">重置</button>
						<button class="search-btn" @click="handleSearch">搜索</button>
					</view>
				</view>

				<!-- 内容区域 -->
				<view class="content-wrapper">
					<!-- 新增按钮 -->
					<button class="add-btn" @click="showAddModal">
						<text class="icon-add">+</text>
						新增物料
					</button>

					<!-- 物料卡片列表 -->
					<view class="card-grid">
						<view class="card-item" v-for="(item, index) in filteredMaterials" :key="item.id">
							<view class="material-card">
								<view class="card-header">
									<text class="material-code">{{ item.materialNumber }}</text>
									<view class="card-actions">
										<text class="action-btn edit" @click="showEditModal(index)">编辑</text>
										<text class="action-btn delete" @click="handleDelete(index)">删除</text>
									</view>
								</view>

								<view class="card-body">
									<view class="info-row">
										<text class="label">生产线：</text>
										<text class="value">{{ item.productionLine }}</text>
									</view>
									<view class="info-row">
										<text class="label">物料编码：</text>
										<text class="value">{{ item.materialCode }}</text>
									</view>
									<view class="info-row description">
										<text class="label">描述：</text>
										<text class="value">{{ item.description || '-' }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 新增弹窗 -->
				<uni-popup ref="addPopup" type="dialog">
					<uni-popup-dialog mode="base" title="新增物料" :before-close="true" @confirm="addMaterial"
						@close="clearForm('add')">
						<view class="form-item">
							<text class="form-label">物料编码</text>
							<input class="form-input" v-model="addForm.materialCode" />
						</view>
						<view class="form-item">
							<text class="form-label">生产线</text>
							<input class="form-input" v-model="addForm.productionLine" />
						</view>
						<view class="form-item">
							<text class="form-label">物料编号</text>
							<input class="form-input" v-model="addForm.materialNumber" />
						</view>
						<view class="form-item">
							<text class="form-label">描述</text>
							<textarea class="form-textarea" v-model="addForm.description" auto-height />
						</view>
					</uni-popup-dialog>
				</uni-popup>

				<!-- 编辑弹窗 -->
				<uni-popup ref="editPopup" type="dialog">
					<uni-popup-dialog mode="base" title="修改物料" :before-close="true" @confirm="updateMaterial"
						@close="clearForm('edit')">
						<view class="form-item">
							<text class="form-label">物料编码</text>
							<input class="form-input" v-model="editForm.materialCode" />
						</view>
						<view class="form-item">
							<text class="form-label">生产线</text>
							<input class="form-input" v-model="editForm.productionLine" />
						</view>
						<view class="form-item">
							<text class="form-label">物料编号</text>
							<input class="form-input" v-model="editForm.materialNumber" />
						</view>
						<view class="form-item">
							<text class="form-label">描述</text>
							<textarea class="form-textarea" v-model="editForm.description" auto-height />
						</view>
					</uni-popup-dialog>
				</uni-popup>
			</view>
		</layout>
	</view>


</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onReady
	} from '@dcloudio/uni-app';

	// 原始数据
	const originalList = ref([{
			id: 1,
			materialCode: 'PROD-001',
			materialNumber: 'MAT-001',
			productionLine: '生产线A',
			description: '核心生产组件'
		},
		{
			id: 2,
			materialCode: 'PROD-002',
			materialNumber: 'MAT-002',
			productionLine: '生产线B',
			description: '辅助生产材料'
		}
	]);

	// 搜索相关
	const searchKeyword = ref('');
	const filteredMaterials = ref([...originalList.value]);

	// 弹窗引用
	const addPopup = ref();
	const editPopup = ref();

	// 表单数据
	const addForm = reactive({
		materialCode: '',
		materialNumber: '',
		productionLine: '',
		description: ''
	});

	const editForm = reactive({
		index: -1,
		materialCode: '',
		materialNumber: '',
		productionLine: '',
		description: ''
	});

	// 搜索处理
	const handleSearch = () => {
		const keyword = searchKeyword.value.trim().toLowerCase();
		if (!keyword) {
			filteredMaterials.value = [...originalList.value];
			return;
		}

		filteredMaterials.value = originalList.value.filter(item => {
			return Object.values(item).some(value =>
				String(value).toLowerCase().includes(keyword)
			);
		});
	};

	// 重置搜索
	const handleReset = () => {
		searchKeyword.value = '';
		filteredMaterials.value = [...originalList.value];
	};

	// 删除确认
	const handleDelete = (index) => {
		uni.showModal({
			title: '删除确认',
			content: '确定要删除该物料吗？',
			success: (res) => {
				if (res.confirm) {
					originalList.value.splice(index, 1);
					handleSearch();
				}
			}
		});
	};

	// 显示新增弹窗
	const showAddModal = () => {
		addPopup.value.open();
	};

	// 显示编辑弹窗
	const showEditModal = (index) => {
		const item = originalList.value[index];
		editForm.index = index;
		Object.assign(editForm, item);
		editPopup.value.open();
	};

	// 新增物料
	const addMaterial = () => {
		originalList.value.push({
			id: Date.now(),
			...addForm
		});
		clearForm('add');
		handleSearch();
	};

	// 更新物料
	const updateMaterial = () => {
		Object.assign(originalList.value[editForm.index], editForm);
		clearForm('edit');
		handleSearch();
	};

	// 清空表单
	const clearForm = (type) => {
		if (type === 'add') {
			Object.keys(addForm).forEach(key => addForm[key] = '');
			addPopup.value.close();
		} else {
			editForm.index = -1;
			editPopup.value.close();
		}
	};

	// 初始化
	onReady(() => {
		filteredMaterials.value = [...originalList.value];
	});
</script>

<style scoped>
/* 碳中和主题变量定义 */
:root {
	--primary: #27ae60;
	--primary-light: #2ecc71;
	--primary-dark: #219654;
	--secondary: #3498db;
	--text-primary: #2c3e50;
	--text-secondary: #4a6572;
	--bg-gradient: linear-gradient(165deg, #f6fbf8, #e8f5f0);
	--card-gradient: linear-gradient(145deg, #ffffff, #f9fafb);
	--border: rgba(39, 174, 96, 0.1);
	--shadow: rgba(39, 174, 96, 0.08);
}

/* 页面容器 */
.page-container {
	background: var(--bg-gradient);
	min-height: 100vh;
	padding: 24rpx;
}

/* 搜索栏 */
.search-bar {
	display: flex;
	gap: 20rpx;
	margin-bottom: 30rpx;
	background: var(--card-gradient);
	border-radius: 20rpx;
	padding: 24rpx;
	box-shadow: 0 8rpx 20rpx var(--shadow);
	animation: fadeIn 0.5s ease forwards;
}

.search-input {
	flex: 1;
	height: 80rpx;
	border: 1px solid var(--border);
	border-radius: 10rpx;
	background-color: #f6fbf8;
	padding: 0 24rpx;
	font-size: 28rpx;
	color: var(--text-primary);
}

.button-group {
	display: flex;
	gap: 16rpx;
}

.reset-btn, .search-btn {
	height: 80rpx;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30rpx;
	font-size: 28rpx;
	font-weight: 500;
	transition: all 0.3s ease;
}

.reset-btn {
	background-color: #f9fafb;
	color: var(--text-secondary);
	border: 1px solid var(--border);
}

.search-btn {
	background: linear-gradient(145deg, var(--primary), var(--primary-light));
	color: white;
	border: none;
	box-shadow: 0 4rpx 8rpx rgba(39, 174, 96, 0.2);
}

.reset-btn:active {
	background-color: #e8f5f0;
}

.search-btn:active {
	background: linear-gradient(145deg, var(--primary-dark), var(--primary));
	transform: translateY(2rpx);
}

/* 内容区域 */
.content-wrapper {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

/* 添加按钮 */
.add-btn {
	align-self: flex-end;
	background: linear-gradient(145deg, var(--secondary), #2980b9);
	color: white;
	border: none;
	border-radius: 50rpx;
	height: 80rpx;
	padding: 0 30rpx;
	font-size: 28rpx;
	font-weight: 500;
	display: flex;
	align-items: center;
	box-shadow: 0 4rpx 8rpx rgba(52, 152, 219, 0.2);
	transition: all 0.3s ease;
	margin-bottom: 24rpx;
}

.add-btn:active {
	transform: translateY(2rpx);
	background: linear-gradient(145deg, #2980b9, #2472a4);
}

.icon-add {
	font-size: 32rpx;
	margin-right: 10rpx;
}

/* 卡片网格 */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24rpx;
}

.card-item {
	animation: slideUp 0.5s ease forwards;
	opacity: 0;
	transform: translateY(20rpx);
}

.card-item:nth-child(1) { animation-delay: 0.05s; }
.card-item:nth-child(2) { animation-delay: 0.1s; }
.card-item:nth-child(3) { animation-delay: 0.15s; }
.card-item:nth-child(4) { animation-delay: 0.2s; }
.card-item:nth-child(5) { animation-delay: 0.25s; }
.card-item:nth-child(6) { animation-delay: 0.3s; }

.material-card {
	background: var(--card-gradient);
	border-radius: 20rpx;
	overflow: hidden;
	border: 1px solid var(--border);
	box-shadow: 0 8rpx 20rpx var(--shadow);
	transition: all 0.3s ease;
}

.material-card:hover {
	transform: translateY(-6rpx);
	box-shadow: 0 12rpx 30rpx rgba(39, 174, 96, 0.12);
}

.card-header {
	padding: 24rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--border);
	background: linear-gradient(90deg, rgba(39, 174, 96, 0.05), rgba(46, 204, 113, 0.02));
}

.material-code {
	font-size: 32rpx;
	font-weight: 600;
	color: var(--text-primary);
	display: flex;
	align-items: center;
}

.material-code::before {
	content: '';
	display: inline-block;
	width: 8rpx;
	height: 32rpx;
	background-color: var(--primary);
	border-radius: 4rpx;
	margin-right: 16rpx;
}

.card-actions {
	display: flex;
	gap: 16rpx;
}

.action-btn {
	font-size: 26rpx;
	padding: 8rpx 16rpx;
	border-radius: 8rpx;
	transition: all 0.3s ease;
}

.edit {
	background-color: rgba(39, 174, 96, 0.1);
	color: var(--primary);
}

.delete {
	background-color: rgba(231, 76, 60, 0.1);
	color: #e74c3c;
}

.action-btn:active {
	transform: scale(0.95);
}

.edit:active {
	background-color: rgba(39, 174, 96, 0.2);
}

.delete:active {
	background-color: rgba(231, 76, 60, 0.2);
}

.card-body {
	padding: 24rpx;
}

.info-row {
	display: flex;
	margin-bottom: 16rpx;
}

.info-row.description {
	flex-direction: column;
}

.label {
	color: var(--text-secondary);
	min-width: 160rpx;
	font-size: 28rpx;
}

.value {
	color: var(--text-primary);
	font-size: 28rpx;
	flex: 1;
	font-weight: 500;
}

.description .value {
	margin-top: 10rpx;
	line-height: 1.6;
}

/* 表单样式 */
.form-item {
	margin-bottom: 24rpx;
}

.form-label {
	display: block;
	font-size: 28rpx;
	color: var(--text-secondary);
	margin-bottom: 12rpx;
}

.form-input {
	width: 100%;
	height: 80rpx;
	background-color: #f6fbf8;
	border: 1px solid var(--border);
	border-radius: 10rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: var(--text-primary);
}

.form-textarea {
	width: 100%;
	min-height: 120rpx;
	background-color: #f6fbf8;
	border: 1px solid var(--border);
	border-radius: 10rpx;
	padding: 20rpx;
	font-size: 28rpx;
	color: var(--text-primary);
}

/* 动画 */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slideUp {
	from { opacity: 0; transform: translateY(20rpx); }
	to { opacity: 1; transform: translateY(0); }
}

/* 响应式设计 */
@media (max-width: 768px) {
	.search-bar {
		flex-direction: column;
	}
	
	.card-grid {
		grid-template-columns: 1fr;
	}
}
</style>